<template>
  <div class="ReportRepairStudentReport">
		<el-input
	        v-model="keyword"
	        placeholder="请输入姓名关键字"
	        class="input-with-select"
			style="width:50%"
		>
	        <template #append>				
	          <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
	        </template>        
		</el-input>
		<el-button primary @click="addInit">提交报修申请</el-button>
		<el-button primary @click="checkReport">查看待审核报修申请</el-button>
		<p></p>
     <el-table :data="tableData" style="width: 100%" 
			:stripe="true" ref="multipleTable"
		    @selection-change="handleSelectionChange"
		    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
		 >
        <el-table-column prop="dorm_no" label="宿舍号" sortable width="90" align = "center" />
        <el-table-column prop="no" label="学号" sortable  align = "center"/>
        <el-table-column prop="name" label="姓名" width="90" align = "center"/>
		<el-table-column prop="dorm" label="宿舍楼" sortable width="90" align = "center" />
		<el-table-column prop="report_time" label="报修时间" sortable align = "center" />
		<el-table-column prop="report_reason" label="报修原因"  align = "center"/>
		<el-table-column prop="handle_sta" label="处理状态" align = "center" />			
	  </el-table>
		  <el-pagination
		    small
		    background
		    layout="prev, pager, next"
			:page-size="pageSize"
		    :page-count="pageCount"
			:current-page="currentPage"
			@current-change="haddlePageChange"
		  />
	
	  
	  <!-- 增加对话框 -->
	  <el-dialog v-model="dialogVisible" title="提交报修申请" width="35%" draggable>
	        <!-- <span>增加</span> -->
	  	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
			  <el-form-item label="宿舍楼">
	  	        <el-select v-model="form.dorm" value-key="building" placeholder="请选择" style="width:700px;" @change="findDorm_no(form.dorm),this.form.dorm_no = null">
	  	          <el-option v-for="item in unique(dormOption)"
	  	        		:key="item.id"
	  	        		:label="item.building"
	  	        		:value="item.building">
	  	        	</el-option>
	  	        </el-select>


	  	      </el-form-item>
	  	      <!-- <el-form-item label="宿舍号">
	  	        <el-select v-model="form.dorm_no" value-key="dorm_no" placeholder="请选择" style="width:700px;">
	  	    </el-form-item> -->
	  	    
	  	    <el-form-item label="宿舍号">
	  	        <el-select v-model="form.dorm_no" value-key="dorm_no" placeholder="请选择" style="width:700px;" :no-data-text="'请先选择宿舍楼'">

	  	          <el-option v-for="item in dorm_noOption"
	  	        		:key="item.id"
	  	        		:label="item.dorm_no"
	  	        		:value="item.dorm_no">
	  	        	</el-option>
	  	        </el-select>
	  	    </el-form-item>
	  	    <el-form-item label="学号" prop="no">
	  	        <el-input v-model="form.no" />
	  	    </el-form-item>
			<el-form-item label="姓名" prop="name">
			    <el-input v-model="form.name" />
			  </el-form-item>
			<el-form-item label="报修原因" prop="report_reason">
			    <el-input v-model="form.report_reason" />
			</el-form-item>
			<el-form-item label="报修时间" prop="report_time">
				  <el-date-picker v-model="form.report_time" type="date" placeholder="选择日期时间"  value-format="YYYY-MM-DD" style="width:100%;">  
				  </el-date-picker>
			</el-form-item>
	  	</el-form>
	        <template #footer>
	          <span class="dialog-footer">
	            <el-button @click="dialogVisible = false">取消</el-button>
	            <el-button type="primary" @click="addSubmit()">提交</el-button
	            >
	          </span>
	        </template>
	      </el-dialog>
		  
		  <!--  待审核对话框 -->
		  <el-dialog v-model="checkreport" title="待审核报修申请" width="60%" draggable>
			<el-table :data="checkReportData" style="width: 100%" :stripe="true"
					 ref="multipleTable"
					    @selection-change="handleSelectionChange"
					    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
					 >
			   <el-table-column prop="dorm_no" label="宿舍号" sortable width="90" align = "center"/>
			   <el-table-column prop="no" label="学号" sortable  align = "center"/>
			   <el-table-column prop="name" label="姓名"  sortable width="90" align = "center"/>
					<el-table-column prop="dorm" label="宿舍楼" sortable width="90"  align = "center"/>
					<el-table-column prop="report_time" label="报修时间" align = "center" />
					<el-table-column prop="report_reason" label="报修原因"  align = "center"/>
			 </el-table>
			 <el-pagination small layout="prev, pager, next"
				:page-size="pageSize1"
				:page-count="pageCount1"
				:current-page="currentPages"
				@current-change="haddlePageChange1"  />
		  </el-dialog>
  </div>
</template>

<script setup>
import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
let { proxy } = getCurrentInstance();
	var tableData=ref([]);
	var pageCount=ref(0)
	var pageSize=ref(9)
	var currentPage=ref(1)
	//获取基础数据
	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("ReportRepairFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	//进入页面时获取数据
	onMounted(()=>{
		getTableData()
		
	});
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();		
	}
	let dormOption=ref([]);
	let form=ref({});
	let dorm_noOption=ref([]);
	const dialogVisible = ref(false)
	//获取增加中的下拉数据
	function addInit(){
		form.value={}
		dorm_noOption.value={}
		dialogVisible.value = true
		var pageSize=ref(100000)
		var currentPage=ref(1)
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("/DormitoryManagementFindAll",jsonparam)
		.then(res => {
			dormOption.value=res.data.records;//下拉数据
		})
	}
	//增加数据提交
	function addSubmit(){
		proxy.$http.post("/ReportRepairStudentReport",form.value)
		.then(res => {
			dialogVisible.value = false 	
			getTableData();  
			form.value={}  
			alert(res.data.message)
		})
	}
	//根据第一层下拉选择的宿舍楼获得相应的宿舍号
	function findDorm_no(dorm){
		proxy.$http.get("/Dorm_noFindByDorm"+'?dorm='+dorm)
		.then(res => {
			 dorm_noOption.value=res.data.records;//下拉数据
		})
	}
	//查看报修申请的page设置
	var checkReportData=ref([]);
	const checkreport = ref(false)
	var pageCount1=ref(0)
	var pageSize1=ref(8)
	var currentPages=ref(1)
	//获取待审核申请数据
	function checkReport(){
		checkreport.value=true
		var param = { "pagination": {"pageNo":currentPages.value,"pageSize":pageSize1.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("ReportRepairMangerCheckReport",jsonparam)
		.then(res => {
			checkReportData.value=res.data.records;
			pageCount1.value=Math.ceil(res.data.totalNum/pageSize1.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange1(currentpages){
		currentPages.value=currentpages;
		checkReport();		
	}
	//按关键字查询
	const keyword=ref('')
	let search=()=>{
		if(keyword.value=='')
			keyword.value=null
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[
        {"value":keyword.value,"key":"姓名","operator":"like"},
		]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("ReportRepairFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
			keyword.value==''
			if(res.data.totalNum ==0 && keyword.value !=null)
			alert(res.data.message)
		})
		.catch(err => {
			console.log(err)
		});
	}
	//判断数字是否符合要求
	const isNum = (rule, value, callback) => {
		const no = /^[0-9]*$/
		 if(value.length<12||value.length>12)
			callback(new Error('学号数字个数应为12'))
		else if (!no.test(value)) {
			callback(new Error('请输入数字!'))
		} else {
			callback()
		}	  
	};
	//表单效验规则
	const formRules = reactive({
		no: [
			{required: true, message: '请输入学号', trigger: 'blur'},
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		name: [
		  {required: true, message: '请输入姓名', trigger: 'blur'},
		  {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
		],
		report_reason:[
			{required: true, message: '请输入报修原因', trigger: 'blur'},
		  {min: 1, max: 50, message: '请保持在50个字符以内', trigger: 'blur'}
		],
		report_time:[
			{required: true, message: '请选择报修时间', trigger: 'blur'},
		],
	})
	//把集合里相同的数据去除
	function unique(arr) {
	  const res = new Map();
	  return arr.filter((arr) => !res.has(arr.building) && res.set(arr.building, 1));
	}
</script>
//分页居中显示
<style scoped>
  .el-pagination {
    justify-content: center;
  }
</style>